<script setup>
import {ref, reactive} from 'vue'

import {useSlots, useAttrs} from 'vue'

const slots = useSlots()
const attrs = useAttrs()

console.log('slots:', slots.default, slots.personslot)
console.log('attrs.empName=', attrs.empName)

const emits = defineEmits(['childMsg'])

const props = defineProps({
  title: {type: String, default: '~~~子组件的默认标题~~~'}
})

function sendChildMsg() {
  let dtSend = new Date()
  emits('childMsg', '来自子组件的消息,发送于' + dtSend.toLocaleString())
}

let children = reactive({
  name: '小孩子家家',
  hobby: ['Football', 'Swimming', 'Sleep']
})

let childCount = ref(1)

defineExpose({
  children,
  childCount
})

</script>

<template>
  <div>
    <div class="title">script setup语法糖演示用的子组件 -> {{props.title}}</div>
    <button @click="sendChildMsg">给父组件发消息</button>
    <div v-if="slots.default">以下是匿名插槽:</div>
    <slot></slot>
    <div v-if="slots.personslot">以下是命名插槽:</div>
    <slot name="personslot"></slot>
  </div>
</template>

<style scoped>

.title {
  font-size: 16px;
  font-weight: bold;
  background-color: transparent;
}
</style>